<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="./css/style.css"/>
		<script src="./js/HjjLayout.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div class="main">
				<div class="header">
					<div class="logo">hjjTodo</div>
					<!-- 绑定回车事件,v-model绑定输入框的value值 -->
					<input id="input" type="text" v-model="inputValue" @keydown.enter="enterEvent" placeholder="请输入待办事项" />
				</div>
				<div class="doing todo">
					<h3><span class="title">正在进行</span></h3>
					<div class="list">
						<div class="todoItem" v-for="item,index in doingList" :key="index">
							<input @click.prevent="checkDone(item.id)" :data-id="item.id" type="checkbox"/>
							<div class="content">{{item.content}}</div>
							<div class="del" @click="deleteItem(item.id)">删除</div>
						</div>
					</div>
				</div>
				<div class="done todo">
					<h3><span class="title">已经完成</span></h3>
					<div class="list">
						<div class="todoItem" v-for="item,index in doneList" :key="index">
							<input @click.prevent="checkDone(item.id)" :data-id="item.id" checked="checked" type="checkbox"/>
							<div class="content">{{item.content}}</div>
							<div class="del" @click="deleteItem(item.id)">删除</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			let app = new Vue({
				el: '#app',
				data: {
					todoList:[],
					inputValue:'',
				},
				computed:{
					// 通过过滤todoList数据，得到未做好的列表和已做好的列表
					doingList:function(){
						let arr =  this.todoList.filter(function(item, index){
							return !item.isDone;
						});
						return arr;
					},
					doneList:function(){
						let arr =  this.todoList.filter(function(item, index){
							return item.isDone;
						});
						return arr;
					}
				},
				methods: {
					enterEvent:function(event){
						// 将数据添加到todoList
						this.todoList.push({
							content:this.inputValue,
							isDone:false,
							id:this.todoList.length
						})
						// 保存
						this.saveData()
						// 清除输入框的值
						this.inputValue = '';
					},
					// 将数据保存到本地存储
					saveData:function(){
						localStorage.todoList = JSON.stringify(this.todoList);
					},
					checkDone:function(id){
						this.todoList[id].isDone = !this.todoList[id].isDone;
						// 每次修改都必须保存
						this.saveData();
					},
					deleteItem:function(id){
						this.todoList.splice(id,1);
						this.todoList.forEach(function(item,i){
							item.id = i;
						})
						this.saveData();
					}
				}
			})
		</script>
	</body>
</html>
